<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>采购申请</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../styles/common.css" />
</head>

<body>
<!--<h1>采购申请管理</h1>-->
<div class="app" id="app">
    <!--    <el-container style="height: 750px; ">-->
    <!--    有一条细细的白线-->

    <!--1.主要内容-->
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-container>
            <div style="width: 100%;position: relative">
                <div style=";margin-bottom: 25px;">
                    <el-input
                            placeholder="请输入食材名"
                            clearable
                            style="width: 20%; "
                            prefix-icon="el-icon-search"
                            v-model="purchaseRequisitionQuery.foodsstuffName"
                    >
                    </el-input>
                    <el-button @click="getAll()" class="dalfBut">查询</el-button>
                    <el-button type="warning" style="float: right" @click="addAndUpdate(null,1)">新增采购申请</el-button>
                </div>
                <el-table border  size="medium" current-row-key="id"  :data="dataList" stripe highlight-current-row>
                    <el-table-column type="index" width="150"  align="center"  fixed label="序号"></el-table-column>
                    <el-table-column prop="foodsstuffName" label="食材名" width="150" align="center"></el-table-column>
                    <el-table-column prop="type" label="类型" width="150" align="center"></el-table-column>
                    <el-table-column prop="number" label="数量" width="150" align="center"></el-table-column>
                    <el-table-column prop="supplierHousehold" label="供应商户" width="150" align="center"></el-table-column>
                    <el-table-column prop="file" width="150"  label="申请材料" align="center"></el-table-column>
                    <el-table-column prop="fund" width="150"  label="资金（元）" align="center"></el-table-column>
                    <el-table-column prop="date" width="200"  label="日期" align="center"></el-table-column>
                    <el-table-column prop="status" width="150"  label="状态" align="center">
                        <template slot-scope="props">
                            <el-tag v-if="props.row.status == 'true'" :type="'success'" disable-transitions>通过</el-tag>
                            <el-tag v-else-if="props.row.status == 'false'" :type="'danger'" disable-transitions>未通过</el-tag>
                            <el-tag v-else :type="'warning'" disable-transitions>{{props.row.status}}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="200"  fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary"  size="mini" @click="addAndUpdate(scope.row,2)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="forbiddenPurchaseRequisition(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页组件-->
                <el-pagination
                        class="pagination"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>

            </div>

        </el-container>
    </el-container>

    <!--2.新增修改 采购申请弹框-->
    <el-dialog :title="title" style="height: 750px"  :visible.sync="purchaseRequisitionAddShow" @close="closeDialog()">
        <el-form :model="formData_purchaseRequisition" :rules="rules" ref="formData_purchaseRequisition" label-width="100px" class="demo-formData_purchaseRequisition">
            <el-form-item  label="食材名：" prop="foodsstuffName">
                <el-input v-model="formData_purchaseRequisition.foodsstuffName"></el-input>
            </el-form-item>

            <el-form-item  label="类型：" prop="type">
                <el-input v-model="formData_purchaseRequisition.type"></el-input>
            </el-form-item>

            <el-form-item  label="数量：" prop="number">
                <el-input-number v-model="formData_purchaseRequisition.number" :min="0" :max="1000" label="数量"></el-input-number>
            </el-form-item>
            <el-form-item  label="供应商户：" prop="supplierHousehold">
                <el-input v-model="formData_purchaseRequisition.supplierHousehold"></el-input>
            </el-form-item>

            <el-form-item  label="资金（元）：" prop="fund">
                <el-input-number v-model="formData_purchaseRequisition.fund" :min="0" :max="100000" label="数量"></el-input-number>

            </el-form-item>

            <el-form-item  label="申请材料：" prop="file">
                <el-upload
                        class="upload-demo"
                        action="http://localhost:8081/files/uploadFile"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :on-success="handleAvatarSuccess2"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="submitForm">{{sureButton}}</el-button>
                <el-button @click="center">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<!--<script src="../../js/request.js"></script>-->


<script>


    new Vue({
        el: '#app',
        data:{
            purchaseInfo:{},

            //1.主页面内容
            //显示数据
            dataList:[],
            tableData:[],

            //分页插件
            pagination: {//分页相关模型数据 1
                currentPage: 1,//当前页码1
                pageSize:5,//每页显示的记录数1
                total:0,//总记录数1
            },

            //食材名搜索内容1
            purchaseRequisitionQuery:{
                foodsstuffName:""
            },

//2.弹框内容
            purchaseRequisitionAddShow: false,
            title:"",   //弹框标题
            sureButton:"",   //弹框确定按钮 文字

            //是否禁用（状态）
            options: [{
                value: '正常',
                label: '正常'
            },{
                value: '禁用',
                label: '禁用'

            },],

            //弹框表单
            formData_purchaseRequisition: {
                id:"",
                image:'',  //头像
            },
            //弹框表单（input）校验
            rules: {
                foodsstuffName: [
                    { required: true, message: '请输入食材名', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请输入类型', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                supplierHousehold: [
                    { required: true, message: '请输入供应商户', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                file: [
                    { required: true, message: '请上传文件', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                number: [
                    { required: true, message: '请输入数量', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                fund: [
                    { required: true, message: '请输入申请资金', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },

            //申请材料上传
            fileList: [
                {name: '', url: ''}
            ],

        },
        created() {
            const purchaseInfo = window.localStorage.getItem('purchaseInfo')
            if (purchaseInfo) {
                this.purchaseInfo = JSON.parse(purchaseInfo)
            }
            console.log("purchaseInfo:::"+purchaseInfo)

            this.getAll();
        },

        methods: {
            getAll(){

                parent ="?foodsstuffName="+this.purchaseRequisitionQuery.foodsstuffName+"&idNumber="+this.purchaseInfo.data.idNumber+"&name="+this.purchaseInfo.data.name
                // alert(parent)
                axios.get("/purchaseRequisitions/getByIdNumberAndName/"+this.pagination.currentPage+"/"+this.pagination.pageSize+parent).then((res)=>{

                    this.dataList=res.data.data.records
                    console.log("PurchaseRequisition:res.data.data.records:")
                    console.log(res.data)
                    this.pagination.total=res.data.data.total
                    this.purchaseRequisitionQuery.foodsstuffName=""
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.getAll();
            },

            //1. 新增/修改表单 弹框
            addAndUpdate(row,title){
                console.log("row")
                console.log(row)
                if (title==1){      //1:"新增采购申请" ;2:"修改采购申请信息"
                    this.fileList=[]   //将上传的申请材料制空

                    this.title="新增采购申请"
                    this.sureButton="立即新增"
                    this.formData_purchaseRequisition={}

                    this.formData_purchaseRequisition.name=this.purchaseInfo.data.name
                    this.formData_purchaseRequisition.idNumber=this.purchaseInfo.data.idNumber

                    this.purchaseRequisitionAddShow=true;
                }else if (title==2){

                    if (row.status=="未审核"){
                        //申请材料的回显(默认只能上传一个，所以回显也只能回显一个，即设置下标为0的就可以了)
                        this.fileList=[{name:"",url:""}]   //bug：因为点击添加时候已经将fileList制空，里面的‘name’，‘url’已经不存在，所以得重新初始化一下
                        this.fileList[0].name=row.file
                        this.fileList[0].url=`/files/downloadFile?name=${row.file}`

                        this.title="修改采购申请信息"
                        this.sureButton="立即修改"
                        console.log("测试1："+row)
                        console.log(row)
                        this.formData_purchaseRequisition=row;
                        this.purchaseRequisitionAddShow=true;
                    }else {
                        this.$message.info("已审核，不可操作！");
                    }
                }
            },
            //2.提交 新增/修改表单
            submitForm() {
                // alert("提交表单："+this.title)
                this.$refs.formData_purchaseRequisition.validate((valid)=>{
                    if (valid){
                        if (this.title=="新增采购申请"){          //1:"新增采购申请" ;2:"修改采购申请信息"
                            axios.post("/purchaseRequisitions/add",this.formData_purchaseRequisition).then((res)=>{
                                if (res.data.code){
                                    this.$message.success("新增成功！");
                                }
                            }).finally(()=>{
                                this.getAll();
                                this.purchaseRequisitionAddShow=false;
                            })
                        }else if (this.title=="修改采购申请信息"){
                            console.log("测试1.2：")
                            console.log(this.formData_purchaseRequisition)

                            axios.put("/purchaseRequisitions/updatePurchaseRequisition",this.formData_purchaseRequisition).then((res)=>{
                                console.log("测试1.3："+this.formData_purchaseRequisition)
                                if (res.data.code){
                                    this.$message.success("修改成功！");
                                }
                            }).finally(()=>{
                                this.purchaseRequisitionAddShow=false;
                                //刷新父页面
                                // parent.window.location.reload();
                                this.getAll();

                            })
                        }
                    }
                })

            },
            //关闭弹框
            closeDialog(){
                this.getAll()
            },
            center() {
                this.purchaseRequisitionAddShow=false;
                this.$message.info("取消操作")
                this.getAll()
            },

            //3.删除采购申请
            forbiddenPurchaseRequisition(row) {
                this.$confirm("此操作删除当采购申请信息，是否继续?","提醒",{type: 'info'
                }).then(()=>{

                    axios.delete("/purchaseRequisitions/"+row.id).then((res)=>{
                        this.$message.success(res.data.msg);
                    }).finally(()=>{
                        this.getAll()
                    })

                }).catch(()=>{
                    //取消删除
                    this.$message.info("取消删除操作")
                })

            },

            /**
             * 申请材料上传
             *
             */
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleAvatarSuccess2(res, file) {
                console.log("res,file")
                console.log(res)
                console.log(file)
                this.formData_purchaseRequisition.file=res.data
            },
        }
    })
</script>
</body>
</html>
